<template>
    <div class="jx-content" id="contain">
        <div class="flexBox">
            <div class="addCourseBtn" @click="addCourse">
                <div >
                    <i class="iconfont icon-jiahao"></i>
                    <p>添加课程</p>
                </div>
            </div>
            <div v-for="(item, index) in courseList" :key="index"  @mouseenter="hoverImg(item)"  @mouseleave="leaveImg(item)"  @click="repeatFn(item.id,item.name)">
                <div class="topArea" :class="{bc2:index%2===0,bc:index%2===1}" >
                    <div>
                        <span class="sign" v-if="item.ownCourse==true">自定义</span>
                         <i class="iconfont icon-Group- closeCourse" @click.stop="deleteFn(item.id)"></i>
                    </div>
                    <div class="imgbox">
                        <img :src='item.iconPath'/>
                    </div>
                </div>
                <div class="downArea">
                    <p class="courseName">{{item.name}}</p>
                    <div class="btnBox">
                        <i class="editCourseBtn"   @click="repeatFn(item.id,item.name)">修改课程</i>
                        <i class="shareResourceBtn" v-if="item.status==2 && item.ownCourse==true" @click.stop="cancelFn(item.id)" >取消共享</i>
                        <i class="shareResourceBtn" @click.stop="shareFn(item.id)" v-if="item.status==1 && item.ownCourse==true">共享资源</i>
                        <i class="borderNone" v-if="item.ownCourse==false && item.fileName" @click.stop="downResouseBox(item.fileName,item.remark)">下载资源包 <b class="iconfont icon-tubiaozhizuo-"></b></i> <!--自定义置灰-->
                        <i class="borderNone dark" v-else-if="item.ownCourse==false && item.fileName==undefined" @click.stop="downResouse">下载资源包 <b class="iconfont icon-tubiaozhizuo-"></b></i>
                    </div>
                </div>
            </div>
            <!-- <div>
                <div class="topArea">
                    <span class="sign">自定义</span>
                    <i class="iconfont icon-Group- closeCourse"></i>
                    <div class="imgbox">
                        <img src='../../../assets/images/logo.png'/>
                    </div>
                </div>
                <div class="downArea">
                    <p class="courseName">分布式计算式计算框架式计算框架框架Spark</p>
                    <div class="btnBox">
                        <i class="editCourseBtn">修改课程</i>
                        <i class="shareResourceBtn">取消共享</i>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                 courseList:[],
                 roleId:''
            }
        },
        created() {
            this.init()
            // 初始化清空
            this.$localstorage.removeLocalStorage('setCourseId','')
            this.$localstorage.removeLocalStorage('CourseTitle','')
            this.roleId=this.$store.state.user.roles[0]
        },
        methods:{
            init(){
               let self = this
                self.$http.get('/tes/course/creation') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.courseList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })
           },
           //添加课程
            addCourse(){
                    this.$router.push({
                        path: './CreativeCourse/CourseBaseInfo',
                    })
            },
            //鼠标经过变色
            hoverImg(item){
                //    item.iconPath=item.iconPath+'.fan.png'
            },
            //鼠标离开变色
            leaveImg(item){
              //  item.iconPath=item.iconPath.substr(item.iconPath,item.iconPath.lastIndexOf('.', item.iconPath.lastIndexOf('.') - 1) );
            },
           //共享资源
           shareFn(id){
                let self = this
                self.$confirm('确定将课程进行共享?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                self.$http.put('/tes/course/'+id+'/status?status=2') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '共享成功',
                            type: 'success'
                         })
                         self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                    })
			    })
           },
            //取消共享
            cancelFn(id){
                let self = this
                self.$confirm('确定取消共享资源', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                self.$http.put('/tes/course/'+id+'/status?status=1') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '取消成功',
                            type: 'success'
                         })
                         self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                    })
			    })

            },
           //修改课程
           repeatFn(id,name){
                let self = this
                self.$localstorage.putLocalStorage('setCourseId', id) //设置值
                self.$localstorage.putLocalStorage('CourseTitle', name)
                if(self.roleId=='TEACHER' || self.roleId == 'MARKET_TEACHER' ||  self.roleId == 'UNIVERSITY_TEACHER' ){
                    self.$router.push({
                        path: '/Teaching/Course/CreativeCourse/CourseBaseInfo',
                    })
                }else if(self.roleId=='SUPER_ADMIN' || self.roleId=='INTERNET_ADMIN'){
                    self.$router.push({
                       path: '/Admin/CreativeCourse/ChapterInfo',
                    })
                }
           },
           //下载资源
           downResouse(){

           },
           //下载资源包
           downResouseBox(remark,fileName){
                let self = this
                self.$http.post('/tes/course/preset-resource/download/permission',{
                    remark :fileName ,
                    fileName : remark
                    }) .then((response) => {
                    let res = response.data
                if(res.code == '200'){
                    self.token=res.data
                    let downloadElement = document.createElement('a');
                    downloadElement.style.display = 'none';
                    downloadElement.href = '/tes/course/preset-resource/download?token='+self.token
                    downloadElement.download = self.versionVideo; //下载后文件名
                    downloadElement.click(); //点击下载
                    //document.body.removeChild(downloadElement); //下载完成移除元素
                    }else{
                        self.$message.error(res.message)
                    }
                })
           },
           //删除方法 //此处等伟明写完班级
        //    commonFn(id){
        //         let self = this
        //         this.$localstorage.putLocalStorage('setCourseId',id)
        //         self.$router.push({
        //             path: './CreativeCourse/CourseBaseInfo',
        //         })
        //     },
            //删除方法 //此处等伟明写完班级
            commonFn(id,message){
                let self = this
                self.$confirm(''+message+',确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.delete('/tes/course/'+id+'?errorDealFlag=true') .then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }else{
                             self.$message.error(res.message)
                        }
                    })
                }).catch(err => {
                     console.log(err)
                })
            },
            //删除课程
            deleteFn(id){
                let self = this
                self.$confirm('确定删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                self.$http.delete('/tes/course/'+id+'?errorDealFlag=') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '删除成功',
                            type: 'success'
                         })
                         self.init()
                    }else if(res.code == '501'){
                        this.commonFn(id,res.message)
                    } else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                    })
			    })
            }
        }
    }
</script>
<style scoped>
 .bc {
    background:url('../../../assets/images/teacherbg_2.png') no-repeat;
    width: 240px;
    border-radius: 6px;
    height: 136px;
    position: relative;

}
.bc2 {
    background:url('../../../assets/images/teacherbg.png') no-repeat;
    width: 240px;
    border-radius: 6px;
    height: 136px;
    position: relative;
}
</style>
<style scoped lang="scss">
@import "./../../../styles/ypublic.scss";
$yellow:#fea11e;

.jx-content{
    background: none;
    padding: 0;
    box-shadow: none;
    margin-top: 30px;
    overflow: hidden;
}
.flexBox{
    >div{
        width: 240px;
        background: $white;
        height: 280px;
        margin:20px 20px 35px 20px;
        float: left;
        border-radius: $br5;
        box-shadow: $boxShadow;
        transition: transform .3s;
        &:hover{
            transform: scale(1.05);
            transition: transform .3s;
            cursor: pointer;
            box-shadow: 0 0 20px  #e0e0e0;
            .courseTitle{
                color: $yellow;
            }
            .closeCourse{
                font-size: 18px!important;
            }
        }
        .topArea{
            height: 136px;
            //background: #495172;
            border-radius:  $br5 $br5 0 0;
            position: relative;
            color: $white;
            .closeCourse{
                position: absolute;
                right: 10px;
                top: 15px;
                font-size: 18px;
                display: block;
                line-height: 9px;
                cursor: pointer;
            }
            .imgbox{
                text-align: center;
                padding-top: 25px;
                &>img{
                    width: 180px;

                }
            }
            .courseTitle{
                display: block;
                height: 100%;
                width: 100%;
                text-align: center;
                line-height: 136px;
                font-size: 90px;
            }
            .sign{
                color: #3e4562;
                width: 50px;
                height: 16px;
                border-radius: 0 20px 20px 0;
                background: $white;
                font-size: 10px;
                display: block;
                text-align: center;
                line-height: 16px;
                position: absolute;
                left: 0;
                top: 12px;
            }
        }
        .downArea{
            height: 100px;
            padding: 24px;
            position: relative;
            p{
                font-size: 16px;
                text-align: center;
                line-height: 1.7;
                //  word-break: break-all;
                // text-overflow: ellipsis;
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 2;
                // overflow: hidden;
            }
            .btnBox{
                position: absolute;
                bottom: 24px;
                left: 0;
                width: 100%;
                height: 30px;
                text-align: center;
                .darkBtn{
                    color: #939393;
                    border: 1px solid #939393
                }
                .borderNone{
                    border: none;
                }
                .dark{
                    color: #939393;
                }
                .icon-tubiaozhizuo-{
                    font-size: 14px;
                }
                i{
                    width: 90px;
                    height: 30px;
                    border: 1px solid #c4cee1;
                    line-height: 30px;
                    text-align: center;
                    color: $yBlue;
                    display: inline-block;
                    cursor: pointer;
                }
                .editCourseBtn{
                    margin-right: 10px;

                }
            }
        }
    }
    .addCourseBtn{
        border: 1px dashed #d9d9d9;
        width: 238px;
        height: 278px;
        >div{
            color: #8f8f8f;
            text-align: center;
            i{
                margin-top: 112px;
                display: inline-block;
                font-size: 14px;
            }
        }
        &:hover{
            border: 1px dashed #385899;
            i{
                color: #385899;
            }
            p{
                color: #385899
            }
        }
    }

}
</style>


